<template>
  <Draggable
    v-bind="$attrs"
    :animation="animation"
    ghost-class="common-drop-placeholder-class"
    chosen-class="common-chosen-class"
    drag-class="common-darging-class"
    :swap-threshold="20"
    v-on="$listeners"
  >
    <slot></slot>
  </Draggable>
</template>
<script>
import Draggable from 'vuedraggable';

export default {
  name: 'CommonDraggable',
  components: {
    Draggable,
  },
  inheritAttrs: false,
  props: {
    animation: {
      type: [Number, String],
      default() {
        return 150;
      },
    },
  },
  data() {
    return {};
  },
  created() {},
  methods: {},
};
</script>
<style lang="less">
.common-drop-placeholder-class {
  background: #f1f1f1;
}
.common-chosen-class {
  // background-color: #fff;
}
.common-darging-class {
  background: #fff;
}
</style>
